<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>原材料待入库</title>
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap3.4.1.min.css" th:href="@{/css/lib/bootstrap3.4.1.min.css}">
    <!-- Bootstrap-table CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap-table.min.css" th:href="@{/css/lib/bootstrap-table.min.css}">
    <!-- jquery-ui CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery-ui.min.css" th:href="@{/css/lib/jquery-ui.min.css}">
    <link href="../../static/css/file.css" rel="stylesheet" th:href="@{/css/file.css}">
    <link href="../../static/css/table.css" rel="stylesheet" th:href="@{/css/table.css}">
</head>

<body onload="init();">
<div class="panel-body" style="padding-bottom:0;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <div class="form-group" style="margin-top:15px">
                <div class="row row-gap">
                    <label class="control-label col-sm-2 label-font" for="txt_search_order_number" title="采购单号">采购单号</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="txt_search_order_number">
                    </div>

                    <label class="control-label col-sm-2 label-font" for="txt_search_code" title="供应商代号">供应商代号</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="txt_search_code">
                    </div>
                </div>

                <div class="row row-gap">
                    <label class="control-label col-sm-2 label-font" for="txt_search_spec" title="规格/初R值/电阻线(线径)">规格/初R值/电阻线(线径)</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="txt_search_spec">
                    </div>

                    <label class="control-label col-sm-2 label-font" for="txt_search_item_name" title="品名／磁棒／尺寸(材质)">品名／磁棒／尺寸(材质)</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="txt_search_item_name">
                    </div>
                </div>

                <div class="row row-gap">
                    <label class="control-label col-sm-2 label-font" for="txt_search_start_time" title="开始时间">开始时间</label>
                    <div class="col-sm-4">
                        <input type="datetime-local" class="form-control" id="txt_search_start_time">
                    </div>

                    <label class="control-label col-sm-2 label-font" for="txt_search_end_time" title="结束时间">结束时间</label>
                    <div class="col-sm-4">
                        <input type="datetime-local" class="form-control" id="txt_search_end_time">
                    </div>
                </div>

                <div class="row row-gap">
                    <label class="control-label col-sm-2 label-font" for="txt_search_start" title="交期开始">交期开始</label>
                    <div class="col-sm-4">
                        <input type="datetime-local" class="form-control" id="txt_search_start">
                    </div>

                    <label class="control-label col-sm-2 label-font" for="txt_search_end" title="交期结束">交期结束</label>
                    <div class="col-sm-4">
                        <input type="datetime-local" class="form-control" id="txt_search_end">
                    </div>
                </div>

                <div class="row row-gap">
                    <label class="control-label col-sm-2 label-font" for="txt_search_title_name" title="发票抬头">发票抬头</label>
                    <div class="col-sm-4">
                        <select class="form-control" id="txt_search_title_name">
                        </select>
                    </div>

                    <div class="col-sm-offset-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_filter" class="btn btn-primary" onclick="filter();">过滤</button>
                        <button type="button" style="margin-left:50px" id="btn_reset_filter" class="btn btn-primary" onclick="init();">重置过滤</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_export" type="button" class="btn btn-default" onclick="exportExcel();">
            <span class="glyphicon glyphicon-export" aria-hidden="true"></span>生成采购单
        </button>
        <h2 style="font-size: 15px; color: red; width: 500px; margin-top: 8px">&nbsp;&nbsp;先按照供应商代号进行查询，然后导出。</h2>
    </div>
    <table id="table"></table>

    <!-- 模态框（Modal） 查看-->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="viewModalLabel">
                        查看原材料采购信息
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <caption>原材料待入库信息</caption>
                        <tbody>
                        <tr>
                            <td>供应商编号</td>
                            <td id="td_code">xxx</td>
                        </tr>
                        <tr>
                            <td>原材料</td>
                            <td id="td_item_name">xxx</td>
                        </tr>
                        <tr>
                            <td>发票抬头</td>
                            <td id="td_title_name">xxx</td>
                        </tr>
                        <tr>
                            <td>采购数量</td>
                            <td id="td_amount">xxx</td>
                        </tr>
                        <tr>
                            <td>入库数量</td>
                            <td id="td_in_amount">xxx</td>
                        </tr>
                        <tr>
                            <td>希望交期</td>
                            <td id="td_hope_delivery_date">xxx</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td id="td_remark">xxx</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>


<!-- JavaScript files-->
<!-- jquery.js -->
<script src="../../static/js/lib/jquery.min.js" th:src="@{/js/lib/jquery.min.js}"></script>
<!-- Bootstrap.js -->
<script src="../../static/js/lib/bootstrap3.4.1.min.js" th:src="@{/js/lib/bootstrap3.4.1.min.js}"></script>
<!-- Bootstrap-table.js -->
<script src="../../static/js/lib/bootstrap-table.min.js" th:src="@{/js/lib/bootstrap-table.min.js}"></script>
<script src="../../static/js/lib/bootstrap-table-zh-CN.min.js" th:src="@{/js/lib/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2.js -->
<script src="../../static/js/lib/sweetalert.min.js" th:src="@{/js/lib/sweetalert.min.js}"></script>
<script src="../../static/js/lib/es6-promise.auto.min.js" th:src="@{/js/lib/es6-promise.auto.min.js}"></script>
<!-- jquery-ui.js -->
<script src="../../static/js/lib/jquery-ui.min.js" th:src="@{/js/lib/jquery-ui.min.js}"></script>
<!-- select2.js -->
<script src="../../static/js/lib/select2.min.js" th:src="@{/js/lib/select2.min.js}"></script>
<script src="../../static/js/lib/Select2-zh-CN.js" th:src="@{/js/lib/Select2-zh-CN.js}"></script>
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../../static/js/dragModel.js" th:src="@{/js/dragModel.js}"></script>
<script>
    /** 初始化 */
    let $table = $('#table');
    let $titleNameSelect = $("#txt_search_title_name");

    // 服务器分页获取数据
    function getServerPaging(node, url, queryParams) {
        initTable(node, url, [10, 20, 30, 40, 50, 60, "All"], queryParams, [{
            checkbox: true
        },{
            field: 'orderNumber',
            title: '采购单号',
            width: '135px',
            formatter: stringFormatter
        },{
            field: 'code',
            title: '供应商代号',
            width: '90px',
            formatter: stringFormatter
        },{
            field: 'itemName',
            title: '品名／磁棒／尺寸(材质)',
            width: '170px',
            formatter: stringFormatter
        },{
            field: 'spec',
            title: '规格/初R值/电阻线(线径)',
            width: '170px',
            formatter: stringFormatter
        },{
            field: 'amount',
            title: '采购数量',
            width: '130px',
            formatter: stringFormatter
        },{
            field: 'inAmount',
            title: '入库数量',
            width: '130px',
            formatter: stringFormatter
        },{
            field: 'unit',
            title: '单位',
            width: '70px',
            formatter: stringFormatter
        },{
            field: 'unitPrice',
            title: '单价',
            width: '100px',
            formatter: stringFormatter
        },{
            field: 'hopeDeliveryDate',
            title: '希望交期',
            width: '170px',
            formatter: dateFormatter
        },{
            field: 'titleName',
            title: '发票抬头',
            width: '200px',
            formatter: stringFormatter
        },{
            field: 'createTime',
            title: '录入时间',
            width: '170px',
            formatter: dateFormatter
        },{
            field: 'operation',
            title: '操作',
            width: '90px',
            formatter: operateFormatter // 自定义方法，添加操作按钮
        }]);
    }

    function operateFormatter(value, row, index) {  // 赋予的参数
            return '<button class="btn btn-success view" data-toggle="modal" data-target="#viewModal" onclick="view('+ index +');">查看</button>';
    }

    // 修改提示框样式
    changeToolTip();

    // 模态框初始化
    dragTheModalDialog();

    // 增加下拉框初始化
    function initInvoiceTitleSelect() {
        noParameterPostRequest("/the-invoice-looked-up/getInvoiceTitle?limit=100&offset=0&sort=create_time&order=DESC", result => {
            $titleNameSelect.empty();
            $titleNameSelect.append("<option value='--请选择--'>--请选择--</option>");
            result.module.rows.forEach(item => $titleNameSelect.append("<option value="+ item.name +">" + item.name + "</option>"));
        }, "GET");
    }

    // 初始化表格数据
    function init() {
        getServerPaging($table, "/raw-materials-to-be-stored/getMaterialPurchaseToBeStorage", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC" };
        });
        initInvoiceTitleSelect();
    }

</script>

<script>
    /** 功能 */
    // 查看
    function view(index) {
        let rows = $('#table').bootstrapTable('getData');
        $("#td_code").text(rows[index].code);
        $("#td_item_name").text(rows[index].itemName);
        $("#td_title_name").text(rows[index].titleName);
        $("#td_amount").text(rows[index].amount);
        $("#td_in_amount").text(rows[index].inAmount);
        $("#td_hope_delivery_date").text(formatDateTime(rows[index].hopeDeliveryDate));
        $("#td_remark").text(rows[index].remark);
    }

    // 过滤
    function filter() {
        let time = [$("#txt_search_start_time"), $("#txt_search_end_time"), $("#txt_search_start"), $("#txt_search_end")];
        if ("" !== time[0][0].validationMessage || "" !== time[1][0].validationMessage || "" !== time[2][0].validationMessage || "" !== time[3][0].validationMessage) {
            swal("操作提示", "请填写完整的时间", "info");
            return;
        }

        let data = { code: $("#txt_search_code").val(), itemName: $("#txt_search_item_name").val(), orderNumber: $("#txt_search_order_number").val(), spec: $("#txt_search_spec").val(),
            titleName: $("#txt_search_title_name").val(), startTime: time[0].val(), endTime: time[1].val(),start: time[2].val(), end: time[3].val() };

        if ("" === data["code"] && "" === data["itemName"] && "" === data["orderNumber"] && "" === data["spec"] && "--请选择--" === data["titleName"]
            && "" === data["startTime"] && "" === data["endTime"] && "" === data["start"]&& "" === data["end"] ) {
            swal("操作提示", "请填写过滤参数", "info");
            return;
        }

        getServerPaging($table, "/raw-materials-to-be-stored/getMaterialPurchaseToBeStorageByConditions", params => {
            let result = { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", code: data["code"],
                itemName: data["itemName"], orderNumber: data["orderNumber"], spec: data["spec"], titleName : data["titleName"],
                startTime : data["startTime"],endTime: data["endTime"],start:data["start"],end:data["end"]};

            removeEmptyField(result);
            if ("--请选择--" === result["titleName"]) {
                delete result["titleName"];
            }
            return result;
        });
    }

    // 导出excel
    function exportExcel() {
        let selections = $table.bootstrapTable('getSelections');
        if (selections.length === 0) {
            swal("操作提示", "请选择记录", "info");
        } else {
            let supCodeArray = selections.map(item => item.code).sort();
            for(let i = 0; i < supCodeArray.length - 1; ++i) {
                if(supCodeArray[i] !== supCodeArray[i + 1]) {
                    swal("操作提示", "存在多个供应商数据", "info");
                    return;
                }
            }
            parameterPostRequest("/raw-materials-to-be-stored/exportExcel", selections, () => loadFile("原材料采购单（发，亿，永）.xlsx"))
        }
    }

</script>

</body>

</html>